<template>
  <!-- 最外层只能有一个组件，不能出现多个 -->
  <div class="demo-userComp-formComp-multiConditionSearchCompDemo">


      <div style="margin-bottom: 10px;">
          <div style="float:left;width: 500px;overflow: auto;border: 1px solid #eee;">
              <condition-search
                  v-model="conditionInput"
                  @enter-search="enterSearchAction"
                  conditionTips="请输入查询条件"
                  :styleObject="styleObject"
              ></condition-search>
          </div>
          <div style="margin-left: 520px;">
              <Button type="primary" @click="showCodeAction">显示代码</Button>
          </div>
          <div style="clear: both"></div>
      </div>

      <!-- 显示JavaScript代码 -->
      <pre v-show="isShowCode">
            <code class="javascript"  v-text="jsCode">
            </code>
        </pre>
      <!-- 显示HTML代码 -->
      <pre v-show="isShowCode">
        <code class="html" v-text="htmlCode">
        </code>
      </pre>


      <!-- 文档说明 -->
      <div class="api">
          <div class="anchor">
              <h2 >props </h2>
          </div>
          <div class="anchor">
              <h3>属性说明</h3>
          </div>
          <table>
              <thead>
              <tr>
                  <th>属性值</th>
                  <th>说明</th>
                  <th>参数</th>
                  <th>返回值</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>v-model</td>
                  <td>文本输入的值</td>
                  <td></td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>conditionTips</td>
                  <td>input框的提示信息，placehoder的显示内容</td>
                  <td></td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>enter-search</td>
                  <td>function 点击回车触发的事件</td>
                  <td>无</td>
                  <td>
                      返回文本输入的值
                  </td>
              </tr>

              </tbody>
          </table>

      </div>

  </div>
</template>

<script>
import hljs from 'highlight.js'

export default {
    mounted: function () {
        window.setTimeout(function () {
            $('.demo-userComp-formComp-multiConditionSearchCompDemo pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }, 100);
    },
    data: function () {
      return {
          isShowCode:false,
          conditionInput: "",
          styleObject:{
              width:"200px"
          },

          htmlCode: '<condition-search\n' +
          '                  v-model="conditionInput"\n' +
          '                  @enter-search="enterSearchAction"\n' +
          '                  conditionTips="请输入查询条件"\n' +
          '                  :styleObject="styleObject"\n'+
          '              ></condition-search>',
          jsCode:'' +
          'export default {\n' +
          '    mounted: function () {\n' +
          '    },\n' +
          '    data: function () {\n' +
          '      return {\n' +
          '          conditionInput: "",\n' +
          '          styleObject:{\n' +
          '             width:"200px"\n' +
          '          },\n' +
          '      }\n' +
          '    },\n' +
          '    methods: {\n' +
          '        // 点击回车触发的事件\n' +
          '        enterSearchAction: function () {\n' +
          '            console.dir(arguments);\n' +
          '        },\n' +
          '    },\n' +
          '}',
      };
    },
    watch: {
        conditionInput : function(){
            console.dir(arguments);
        }
    },
    methods: {
        // 显示代码
        showCodeAction: function (){
            this.isShowCode = !this.isShowCode;
        },
        // 点击回车触发的事件
        enterSearchAction: function (inputValue) {
            console.dir(arguments);
            console.log(this.conditionInput);
        },
    },
  }




</script>

<style scoped lang="scss">
    /***
           scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
           lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
           ***/
    .demo-userComp-formComp-multiConditionSearchCompDemo {
        .api table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
